<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>药品信息</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <base href="<%=url%>">
  <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://lib.baomitu.com/layui/2.6.5/layui.min.js"></script>
  <link href="https://lib.baomitu.com/layui/2.6.5/css/layui.min.css" rel="stylesheet">
  <style>
  </style>
</head>
<body>
<div class="layui-main">
  <!-- 表格上方标题 -->
  <blockquote class="layui-elem-quote">列表</blockquote>
  <!-- 添加按钮 -->
  <a class="layui-btn layui-btn-sm" id="add-btn">添加</a>
  <a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">编号查询:</span><input type="text" placeholder="请输入编号" id="input-ypid" style="height: 30px"></a>
  <a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">名称查询:</span><input type="text" placeholder="请输入姓名" id="input-ypname" style="height: 30px"></a>
  <button  style="height: 30px;background-color: #1e9fff;color: whitesmoke;width: 60px;border:1px #1e9fff; border-radius: 4px" id="select_ypId_ypName">搜索</button>
  <!-- 信息表 -->
  <table id="tbl" lay-filter="tbl"></table>
  <script type="text/html" id="tbl-toolbar">
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit-stock">补货</a>
  </script>
  <!--    添加弹出层-->
  <div id="add-layer" style="display: none; padding: 20px">
    <form id="add-form" class="layui-form layui-form-pane" lay-filter="update-form">
      <div class="layui-form-item">
        <label class="layui-form-label">药品名称</label>
        <div class="layui-input-block">
          <label>
            <input type="text"  name="ypname" class="layui-input" lay-verify="required">
          </label>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
          <label>
            <input type="text" name="notes" class="layui-input"  autocomplete="off">
          </label>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="add-form-submit">添加</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
</div>
</div>
<!-- 补货弹出层 -->
<div id="insert-layer" style="display: none; padding: 20px">
  <form id="insert-form" class="layui-form layui-form-pane" lay-filter="insert-form">

    <div class="layui-form-item">
      <label class="layui-form-label">药品编号</label>
      <div class="layui-input-block">
        <label>
          <input type="text" name="ypid" class="layui-input" lay-verify="required" disabled>
        </label>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">药品名称</label>
      <div class="layui-input-block">
        <label>
          <input type="text" name="ypname" class="layui-input" lay-verify="required">
        </label>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">药品规格</label>
      <div class="layui-input-block">
        <label>
          <input type="text" name="normsid" class="layui-input" lay-verify="required" autocomplete="off">
        </label>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">药品单位</label>
      <div class="layui-input-block">
        <label>
          <select name="unitid" class="unitid"></select>
        </label>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">药品价格</label>
      <div class="layui-input-block">
        <label>
          <input type="text" id="price" name="price" class="layui-input" lay-verify="required" autocomplete="off">
        </label>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">药品进价</label>
      <div class="layui-input-block">
        <label>
          <input type="text" id="jprice" name="jprice" class="layui-input" lay-verify="required" autocomplete="off">
        </label>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">进货数量</label>
      <div class="layui-input-block">
        <label>
          <input type="text" name="jnum" class="layui-input" lay-verify="required" autocomplete="off">
        </label>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">药房类型</label>
      <div class="layui-input-block">
        <label>
          <select name="yfid" class="yfid"></select>
        </label>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">申请人</label>
      <div class="layui-input-block">
        <label>
          <input type="text" id="sname" name="sname" class="layui-input" lay-verify="required" autocomplete="off">
        </label>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <label>
          <input type="text" name="notes" class="layui-input"  autocomplete="off">
        </label>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="insert-form-submit">确定</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>
</div>

<script>
  //遍历下拉框内容
  $(function () {
    $.get("/medicine/SelectUnit",function (date,res) {
      if(res=="success"){
        $(".unitid").empty();
        for (let i = 0; i < date.length; i++) {
          $(".unitid").append("<option value="+date[i].unitid+">"+date[i].unitname+"</option>")

        }
      }
    });
    setTimeout(function () {
      $.get("/medicine/SelectHome",function (date,res) {
        if(res=="success"){
          $(".yfid").empty();
          for (let i = 0; i < date.length; i++) {
            $(".yfid").append("<option value="+date[i].yfid+">"+date[i].yfname+"</option>")

          }
        }
      });
    },500)

  })


  layui.use(['jquery', 'table', 'layer', 'form'], function () {
    var $ = layui.$;
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    table.render({
      elem: '#tbl',
      url: '/medicine/selectAll',
      method: 'get',
      initSort: { //排序
        field: 'sctime' //排序字段，对应 cols 设定的各字段名
        , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
      },
      cols: [[
        {field: 'ypid', title: '药品编号', width: 90},
        {field: 'ypname', title: '药品名称', width: 150},
        {field: 'normsid', title: '药品规格', width: 120},
        {field: 'unitid', title: '药品单位',templet:function (d) {
            return d.unit && d.unit.unitname
          },width: 100},
        {field: 'price', title: '药品单价', width: 100},
        {field: 'num', title: '药品数量', width: 100},
        {field: 'yfid', title: '药房类型',templet:function (d) {
            return d.dispensary && d.dispensary.yfname
          }, width: 165},
        {field: 'sctime', title: '生产日期', templet: "<div>{{layui.util.toDateString(d.sctime, 'yyyy-MM-dd')}}</div>", width: 100},
        {field: 'sxtime', title: '失效日期', templet: "<div>{{layui.util.toDateString(d.sxtime, 'yyyy-MM-dd')}}</div>",width: 100},
        {field: 'notes', title: '备注', width: 127},
        {toolbar: '#tbl-toolbar', title: '操作', width: 180}
      ]],
      // 根据字段库存数量改变字体颜色
      done:function (response) {
        var tableView=this.elem.next();
        $.each(response.data,function (index,itme) {
          if(itme.num <= "100"&&itme.num > "50"){
            tableView.find('tbody tr[data-index="'+ index +'"]').css('color','orange')
          }
          if(itme.num<="50"&&itme.num >= "0"){
            tableView.find('tbody tr[data-index="'+ index +'"]').css('color','red')
          }
        })
      },
      page: {
        limit: 5,//指定每页显示的条数
        limits: [5, 10, 20, 40, 50, 60, 80, 100]//每页条数的选中
      }//开启分页

      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
        var result;
        if (this.page.curr) {
          result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
        } else {
          result = res.data.slice(0, this.limit);
        }
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": res.count, //解析数据长度
          "data": result //解析数据列表
        };
      },
      // 表格容器id，用于表格重载
      id: 'tbl'
    });
    var AddIndex;
    // 显示添加弹出层
    $('#add-btn').click(function () {
      // 每次显示前重置表单
      $('#add-form')[0].reset();
      AddIndex = layer.open({
        type: 1,
        title: '添加',
        skin: 'layui-layer-molv',
        area: ['500px'],
        content: $('#add-layer')
      });
    });

    // 添加表单提交
    form.on('submit(add-form-submit)',function (data) {
      // ajax方式添加
      console.log(data.field)
      $.ajax({
        url: "/medicine/insert",
        type: "get",
        data: data.field,
        contentType: 'application/json',
        dataType: 'json',
        success: function (data) {

          console.log(data)
          if (data.status === 1) {
            layer.close(AddIndex);
            layer.msg('添加成功');
            table.reload('tbl');
          } else {
            layer.msg('添加失败');
          }
        },
        error: function () {
          console.log("ajax error");
        }
      });
      // 阻止表单跳转
      return false;
    });
    table.on('tool(tbl)', function (obj) {
      // 获取当前行数据和lay-event的值
      var data = obj.data;
      var event = obj.event;
      // 删除事件
      if (event === 'del') {
        layer.confirm('确定删除该吗？', function (index) {
          // ajax方式删除
          $.ajax({
            url: '/medicine/' + data.ypid,
            type: "GET",
            dataType: 'json',
            success: function (data) {
              if (data.status === 1) {
                layer.msg('删除成功');
                table.reload('tbl');
              } else {
                layer.msg('删除失败');
              }
            },
            error: function () {
              console.log("ajax error");
            }
          });
          layer.close(index);
        });
      }
      var UpIndex;
      // 修改数据回显
      if (event === 'edit') {
        // 表格数据回显
        form.val('update-form', {
          "ypid": data.ypid,
          "ypname":data.ypname,
          "normsid": data.normsid,
          "unitid":data.unit.unitid,
          "price":data.price,
          "num":data.num ,
          "yfid":data.dispensary.yfid,
          "notes":data.notes
        });
        // 显示修改表单的弹出层

        UpIndex= layer.open({
          type: 1,
          title: '更新信息',
          skin: 'layui-layer-molv',
          area: ['500px'],
          content: $('#update-layer')
        });
        // 修改表单提交
        form.on('submit(update-form-submit)',function (data) {
          console.log(data.field)
          // ajax方式修改
          $.ajax({
            url: "/medicine/update",
            type: "get",
            data: data.field,
            contentType: 'application/json',
            dataType: 'json',
            success: function (data) {
              if (data.status === 1) {
                layer.close(UpIndex);
                layer.msg('更新成功');
                table.reload('tbl');
              } else {
                layer.msg('更新失败');
              }
            },
            error: function () {
              console.log("ajax error");
            }
          });
          // 阻止表单跳转
          return false;
        });
      }
      // 补货数据回显
      if (event === 'edit-stock') {
        // 表格数据回显
        form.val('insert-form', {
          "ypid": data.ypid,
          "ypname": data.ypname,
          "normsid": data.normsid,
          "unitid": data.unit.unitid,
          "price": data.price,
          "num": data.num,
          "yfid": data.dispensary.yfid,
          "notes": data.notes
        });
        // 显示补货表单的弹出层

        UpIndex = layer.open({
          type: 1,
          title: '补货信息',
          skin: 'layui-layer-molv',
          area: ['500px'],
          content: $('#insert-layer')
        });
        // 表单提交
        form.on('submit(insert-form-submit)',function (data) {
          var price = $("#price").val(); // 售价
          var jprice = $("#jprice").val(); // 进价

          if(Number(price) <= Number(jprice)){
            layer.msg("进价只能小于售价");
          } else {
            // ajax方式修改
            $.ajax({
              url: "/check/insert",
              type: "get",
              data: data.field,
              contentType: 'application/json',
              dataType: 'json',
              success: function (data) {
                if (data.status === 1) {
                  layer.close(UpIndex);
                  layer.msg('提交成功');
                  table.reload('tbl');
                } else {
                  layer.msg('提交失败');
                }
              },
              error: function () {
                console.log("ajax error");
              }
            });
          }
          // 阻止表单跳转
          return false;
        });

      }

    });
    //精确查询  根据jid查询
    $("#select_ypId_ypName").click(function () {
      var ypid=$("#input-ypid").val();
      var ypname=$("#input-ypname").val();
      table.render({
        elem: '#tbl',
        url: '/medicine/select_ypId_ypName?ypid='+ypid+'&ypname='+ypname,
        method: 'get',
        cols: [[
          {field: 'ypid', title: '药品编号', width: 90},
          {field: 'ypname', title: '药品名称', width: 150},

          {field: 'normsid', title: '药品规格', width: 120},
          {field: 'unitid', title: '药品单位',templet:function (d) {
              return d.unit.unitname
            },width: 100},
          {field: 'price', title: '药品单价', width: 100},
          {field: 'num', title: '药品数量', width: 100},
          {field: 'yfid', title: '药房编号',templet:function (d) {
              return d.dispensary.yfname
            }, width: 165},
          {field: 'sctime', title: '生产日期', templet: "<div>{{layui.util.toDateString(d.sctime, 'yyyy-MM-dd')}}</div>", width: 100},
          {field: 'sxtime', title: '失效日期', templet: "<div>{{layui.util.toDateString(d.sxtime, 'yyyy-MM-dd')}}</div>",width: 100},
          {field: 'notes', title: '备注', width: 127},
          {toolbar: '#tbl-toolbar', title: '操作', width: 180}
        ]],
        // 根据字段库存数量改变字体颜色
        done:function (response) {
          var tableView=this.elem.next();
          $.each(response.data,function (index,itme) {
            if(itme.num <= "100"&&itme.num > "50"){
              tableView.find('tbody tr[data-index="'+ index +'"]').css('color','orange')
            }
            if(itme.num<="50"&&itme.num >= "0"){
              tableView.find('tbody tr[data-index="'+ index +'"]').css('color','red')
            }
          })
        },
        page:{
          limit:5,//指定每页显示的条数
          limits:[5,10,20,40,50,60,80,100]//每页条数的选中
        }//开启分页

        , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
          var result;
          if (this.page.curr) {
            result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
          }
          else {
            result = res.data.slice(0, this.limit);
          }
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.count, //解析数据长度
            "data": result //解析数据列表
          };
        },
        // 表格容器id，用于表格重载
        id: 'tbl'
      });
    })
  })
</script>
<script>
  $(function () {
    setTimeout(function () {
      $.get("/loginName",function (date) {
        $("#sname").val(date)
      })
    },100)

  })
</script>
</body>
</html>